<%@taglib prefix="s" uri="/struts-tags" %>
<style type="text/css">

    .login {
        width: 250px;
        height: 40px;
        float: left;
        margin-bottom: 30px;
        margin-left: 40px;
        text-align: center;
        font-family: Verdana;
        font-style: italic;
        font-size: 20px;
        color: #363636;
    }

    #forLogin {
        width: 400px;
        display: block;
        margin-left: 300px;
        margin-top: 50px;
        border: #dddddd ridge 2px;
        padding-top: 30px;
        background-color: #dddddd;
        height: 120px;

    }

    .submit {
        margin-left: 10px;
        margin-bottom: 20px;
        margin-top: 1px;
        height: 47px;
    }

    #actionMessage {
        font-size: 20px;
        margin-top: 90px; /*margin-top: 100px;*/
        margin-left: 300px;
        margin-bottom: 0px;
        color: #cd0a0a;
    }

    #kkk {
        margin-bottom: 250px;
    }

    #msg{
        float: left;
        margin-left: 25px;
        width:350px;
        margin-top: 0px;

    }
</style>
<script type="text/javascript">

    function pwdFocus() {
        $('#fakepassword').hide();
        $('#password').show();
        $('#password').focus();
    }

    function pwdBlur() {
        if ($('#password').attr('value') == '') {
            $('#password').hide();
            $('#fakepassword').show();
        }
    }

    $(document).ready(function() {
        var  ajaxLoading=false;
        $("#waiting").css("display","none");
        var value;

        $('.login').focus(function() {
            value = $(this).val();
            if (value == "Email") {
                $(this).val("");
            }
        });
        $('.login').blur(function() {
            if ($(this).val() == "") {
                $(this).val("Email");
            }
        });

        $(".submit").click(function(){
            if(!ajaxLoading){
                ajaxLoading=true;
                var email = $("input[name=email]").val();
                $("#waiting").show();
                if(email != 'Email'){
                    $.ajax({
                          url: "sendMailToChangePassword.action",
                          data:{
                                email:email
                               },
                          type:"post",
                                success:function(data) {
                                    if(data == 'success') {
                                         $("#msg").text("go to your email to change your password");
                                    } else if(data == 'error') {
                                        $("#msg").text("error occurred");
                                    }else {
                                        alert(data);
                                    }
                                     $("#waiting").hide();
                                }
                    });
                }
                ajaxLoading=false;
            }
        })
    });
</script>
<div id="waiting"></div>
<div id="actionMessage" style="height: 50px;">
    <s:actionmessage/>
</div>
<form action="" method="post" id="kkk">
    <div id="forLogin">
        <input type="text" class="login" name="email" value="Email"/>
        <div style="width: 400px;margin-bottom: 0px;">
            <input type="button" class="submit" name="submit" value="send"/>
        </div>
        <div id="msg"></div>

    </div>
</form>